

let base64Str = '' // 定义一个bas64的字符串


// 选择图片
$('.select').on('click', function () {
  // 触发input的点击事件click()
  $('#file').click()
})




// 给input注册 change事件 -- 获取用户上传图片的信息
$('#file').on('change', function (e) {
  const files = e.target.files
  console.log(files); // 图片的信息
  if (files.length === 0) return
  // window.URL 主要作用是读取文件的字符串，在img或video等带有src属性的标签上展示。
  // window.URL.createObjectURL(object) file 
  // console.log(files[0]);
  const blobUrl = window.URL.createObjectURL(files[0])
  console.log(blobUrl); // 生成blob字符串 用来设置页面img身上的src属性
  $('#image').prop('src', blobUrl)

  // 将图片文件转化成base64字符串 (base64字符串主要用于传输,跟图片相关)
  // 1.声明一个js文件流
  let reader = new FileReader()

  if (files[0]) {
    // 2.将文件转成base64字符串
    reader.readAsDataURL(files[0])

    // 3.通过监听事件 onloadend
    reader.onloadend = function () {
      // console.log(reader.result);  // base64的输出结果
      base64Str = reader.result
    }
  }
})



// 上传头像
$('.sure').on('click', function () {
  if (!base64Str) return layer.msg('请上传图片!')
    
  // console.log('上传头像触发事件',base64Str);
  // console.log('上传头像触发事件',encodeURIComponent(base64Str));
  // 发送请求 ===> base64字符串  
  // 数据格式: key=value  avatar=base64字符串
  // encodeURIComponent 前端的编码方式
  // decodeURIComponent 前端的解码方式
  const data = `avatar=${encodeURIComponent(base64Str)}`
  axios({
    method: 'POST',
    url: 'http://api-breakingnews-web.itheima.net/my/update/avatar',
    data,
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(({ data: res }) => {
    // console.log(res);
    layer.msg(res.message)
    if (res.status === 0) {
      window.parent.getUserInfo()
    }
  })
})


// 获取用户的个人信息
function selfUser() {
  axios({
    method: 'GET',
    url: 'http://api-breakingnews-web.itheima.net/my/userinfo',
    // 自定义请求头
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(({ data: res }) => {
    // console.log(res);
    // 判断请求成功
    if (res.status === 0) {
      let { user_pic } = res.data
      if (user_pic) $('#image').prop('src', user_pic)
    }
  })
}
selfUser()